<template>
  <div class="watch-notice">
    <el-dialog title="公告信息" width="20%" v-model="trafficStore.watchNoticeVisible" class="watch-notice-dialog">
      <hr style="margin-bottom: 10px;" color="#f0f0f0">
        <el-carousel height="270px">
          <el-carousel-item v-for="notice in noticeList" :key="notice.id">
            <div class="carousel-content">
              <span style="display: flex; justify-content: space-between; padding: 10px;">
                <h1 style="font-size: 30px; font-weight: bolder; font-family: 'Times New Roman';"  >{{ notice.title }}</h1>
              </span>
              <span>
                <p>时间: {{ notice.time }}</p>
              </span>
              <span>
                <p style="font-size: 20px; font-family: 'Times New Roman';">{{ notice.content }}</p>
              </span>
            </div>
          </el-carousel-item>
        </el-carousel>
      <!-- </div> -->
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { useTrafficStore } from "@/stores/counter";
import { getNoticeHttp } from '../../request/Http';
const trafficStore = useTrafficStore()
const noticeList = ref([])

onMounted(async () => {
  const res = await getNoticeHttp()
  console.log(res);
  noticeList.value = res.result,
  console.log(noticeList.value);
})
</script>

<style>
.watch-notice-dialog {
  width: 500px;
  height: 350px;
}
.carousel-content {
  display: flex;
  flex-direction: column;
  gap: 5px ;
}

.el-dialog__title {
  color: #303133;
  font-size: 18px;
  font-weight: bolder;
}
/* 跑马灯背景 */
.el-carousel__item:nth-child(2n) {
  background-color: #f6f9ff;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #ffffff;
}
</style>
